<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body {
            background-image: url("烤肉2.jpg");
            background-size:100% ;
            background-repeat: no-repeat;
        }
        .mod-new-reg-content {
            /* 相对路径 */
            position: absolute;
            right: 200px;
            top: 20%;
            margin: 0 0 22px 39px;
            margin-top: 80px;
            width: 350px;
            height: 300px;
            *background: #fff;
            background: #fff \9;
            background: rgba(255, 255, 255, .7);
            /* 圆角 */
            border-radius: 12px;
            /* 防止溢出 */
            overflow: hidden
        }

        .mod-new-reg-content .new-reg-guide-login {
            margin: 20px 0 22px 39px
        }

        .shurukuang {
            font-size: 18px;
            height: 25px;
            width: 260px;
            /* 边框样式 */
            border: 1px solid #c8cccf;
            color: #6a6f77;
        }

        .table-1 {
            position: relative;
            /*靠右距离*/
            left: 45px;
            /*靠上距离*/

            height: 160px;
        }

        /* 按钮*/
        button {
            /* 创建渐变 */
            background-color: brown;


            width: 260px;
            /*设置按钮宽度*/
            height: 40px;
            /*设置按钮高度*/
            color: white;
            /*字体颜色DarkBlue*/
            border-radius: 3px;
            /*让按钮变得圆滑一点*/
            border-width: 0;
            /*消去按钮丑的边框*/
            margin: 0;
            outline: none;
            /*取消轮廓*/
            font-size: 17px;
            /*设置字体大小*/
            text-align: center;
            /*字体居中*/
            cursor: pointer;
            /*设置鼠标箭头手势*/

        }

        /*鼠标移入按钮范围时改变颜色*/
        button:hover {
           background-color: crimson;
        }

        .pbiaoqian {
            font-size: 10px;
        }
    </style>
</head>

<body>
<div>
    <form action="">
    <div class="mod-new-reg-content">
        <br>
        <div class="new-reg-guide-login">
            <h3>帐号密码登录</h3>
        </div>
        <div class="table-1">
            <label>
                <tr>
                    <td><input type="text" class="shurukuang" name="username" v-model="username" placeholder="请输入你用户名"/>
                    </td>
                </tr>
            </label>
            <br>
            <label>
                <tr>
                    <td><input type="password" class="shurukuang" name="password" placeholder="请输入你的密码" v-model="password"></td>
                </tr>
            </label>
            <div>
                <br>
                <label><input type="checkbox" name="rem" value="">记住密码</label>
            </div>
            <br>
            <button type="button" @click="login()">登入</button>

        </div>
    </div>
    </form>
</div>
</body>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axion-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let vm = new Vue({
        el:"form",
        data:{username:"",
        password:""},
        methods:{
            login:function () {
                let data = new FormData(document.querySelector("form"))
                axios.post("/login",data).then(function (response) {
                    if (response.data==1){
                        location.href="/admin.html"
                    }else if (response.data==2){
                        alert("用户名不存在")
                    }else {
                        alert("密码错误")
                    }
                })
            }
        }
    })
    let cookies = document.cookie.split(";")
    for (let cookie of cookies) {
        let arr= cookie.split("=")
        let name = arr[0];
        let value = arr[1];
        if (name.trim()=="username"){
            console.log("用户名="+value)
            vm.username=value
        }
        if (name.trim()=="password"){
            console.log("密码="+value)
            vm.password=value
        }
    }
</script>
</html>
